[Notes] CSS Basic

Posted on | In
Symbols count in article: 8.2k | Reading time ≈ 7 mins.

CSS Basic

CSS introduction

  • CSS stands for Cascading Style Sheets
  • describes how HTML elements (titles, images, paragraph…) are to be displayed on screen, paper, or in other media
  • CSS version 2.1/3.0
  • IE9 and above browsers support CSS 3.0

CSS in HTML

Usage of CSS in HTMl

  • Inline Style 内联样式 (highest priority) <h1 style="color:blue;">This is a heading</h1> (Not recommended)

  • Internal Style 嵌入样式 (second priority) 

    1
    2
    3
    4
    5
    6
    7
    <head>
    <style>
    h1 {
          color: maroon;
        } 
    </style>
    </head>

  • External Style 外部样式 (lowest priority)

    • Each page must include a reference to the external style sheet file inside the <link> element.

    • The <link> element goes inside the <head> section:

      1
      2
      3
      <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
      </head>
      • type attribute: specifies the media type of the linked document
      • rel：specifies the relationship between the current document and the linked document
      • href：specifies the location of the linked document
  • Default Style 缺省样式
  • example 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!DOCTYPE html>
    <html>
        <head>
            <!-- external style -->
            <link rel="stylesheet" type="text/css" href="mystyle.css">    </head>
            <!-- internal style -->
            <style>
                    h1 {
                    color: blue;
                    }
                    </style>
        <body>
            <!-- default style -->
            <h2>test0</h2>
            <h1>test1</h1>
            <!-- Inline style -->
            <p style="color:brown">test2</p>

        </body>
    </html>

Syntax

Selector {Property: value; Property: value;}

  • example h1 {color:blue;font-size:12px;}
  • The selector
    • points to the HTML element you want to style.
  • The declaration block
    • contains one or more declarations separated by semicolons.
    • each declaration includes a CSS property name and a value, separated by a colon.
    • always ends with a semicolon
    • declaration blocks are surrounded by curly braces.
  • Comment /* */

Basic properties

  • width - 宽度， 单位px（像素）
  • height - 高度
  • color - 前景色， 也就是文字的颜色
  • background-color - 背景色
  • font-size - 字体的大小

CSS Selectors

  • * All Elements * {color:blue} /*all items set to blue*/
  • Element name. p {color:blue} /* all p tag turn to blue */

  • #id

    • The id selector uses the id attribute of an HTML element to select a specific element.
    • The id of an element should be unique within a page, so the id selector is used to select one unique element!
    • To select an element with a specific id, write a hash (#) character, followed by the id of the element.
      1
      2
      3
      4
      5

      <li id=”li-ca”>CA</li> 
      #li-ca {
          color: blue;
      }

  • class

    • The class selector selects elements with a specific class attribute.
    • To select elements with a specific class, write a period (.) character, followed by the name of the class.
      1
      2
      3
      4
      5
      .nice {
          color: purple;
      }    
      <p class="nice">lalala</p>
      <p class="nice">hohoho</p>

Combinator

  • Combinator is a selector combined by multiple selectors.

  • 后代选择器 div p : selects all <p> elements inside <div> elements`

    1
    .class h3 {color:red; font-size:25px;}

  • 并集选择器 div, p : selects all <div> elements and all <p> elements

    1
    .class, h3 {color:red; font-size:25px;}

  • 子元素选择器 div > p : selects all <p> elements where the parent is a <div> element

    1
    .class, h3 {color:red; font-size:25px;}

  • Difference of div p and div > p: div p includes all sons and grandsons, while div > p has only direct sons.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <style>
        <!-- All strong whose parent is p -->
        p > strong {
            color: red;
        }
        p > span > strong {
            color: green;
        }
        <!-- All strong below div -->
        div strong {
            font-size: 50px;
        }        
    </style>   
    <!-- ...  -->
    <div>
        <p id="aa">this is <span><strong>strong under span</strong></span></p>
        <p>this is paragraph 3</p>
        <p><strong>I am strong under p</strong></p>
    </div>

  • Attribute selector: Use a [] to select attributes

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <style>
        <!-- all p with class attribute -->
        p[class] {
            color:red;
        }
        <!-- the class of p is "right -->
        p[class="right"] {
            color:blue;
        } 
        <!-- class~="demo means class contains "demo"-->
        p[class~="demo"] {
            font-size: 60px;
        }        
    </style> 
    <body>
        <p class="right"> i am div1</p>
        <p> i am div2</p>
        <p class="left demo"> i am div3</p>
        <p id="side"> i am div4</p>        
    </body>

  • Pseudo Classes 伪类

    • :link - (a:link) selects all unvisited links
    • :hover - (a:hover) selects links on mouse over
    • :active - (a:active) selects the active link
    • :visited - (a:visited) selects all visited links\
    • :first-child - (p:first-child) selects every <p> element that is the first child of its parent
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <style>
      a:link {
          color: red;
      }
      a:visited {
          color: yellow;
      }
      a:hover {
          font-size: 50px;
          color: blue;
      }
      a:active {
          color: green;
      }      
      p:first-child {
          background-color: brown;
      }    
    </style>

  • Pesudo Elements

    • ::first-element (does not work on inline elements, such as span)
      1
      2
      3
      4
      5
      6
      <style>
        p::first-letter {
            font-size: 100px;
            color: pink;
        }     
      </style>

CSS Cascade and Inheritance

CSS Cascade

  • the cascade is a set of rules for determining which style properties get applied to an element.
  • It specifies how a web browser should handle multiple styles that apply to the same tag and what to do when CSS properties conflict.
  • bottom > top

Inheritance

  • some property values applied to an element will be inherited by that element’s children, and some won’t.
  • font-family and color to be inherited, as that makes it easy for you to set a site-wide base font by applying a font-family to the <html> element;
  • margin, padding, border, and background-image to NOT be inherited
  • <a> does not support any kind of inheritance unless: a {color: inherit;}
  • eg. <span> inside a <p> will be overrided.

Specificity

First Principle

  • Inline style > Internal > external > inheritance > default

Second Principle

  • id > class/pseudo class > tag > inheritance > default

Specificity Collision

  • CSS provides a formula for determining a style’s specificity that’s based on a value assigned to the style’s selector - a tag selector, class selector, ID selector, and so on. Here’s how the system works:
    • A tag selector is worth 1 point.
    • A class selector is worth 10 points.
    • An ID selector is worth 100 points.
    • An inline style is worth 1,000 points.
    • The bigger the number, the greater the specificity.
  • Example
    • A tag style for the tag (specificity = 1)
    • A class style named .highlight (specificity = 10)
    • An ID style named #logo (specificity = 100)
    • Then say your web page has this HTML: <img id=”logo” class=”highlight” src=”logo.gif”/>. If you define the same property - such as the border property - in all three styles, then the value from the ID style (#logo) always wins out.
  • A pseudo-element (like ::before) is treated like a tag selector and is worth 1 point. A pseudo-class (:link) is treated like a class and is worth 10 points.
  • Since descendant selectors are composed of several selectors - #content p, or h2 strong, for example, the math gets a bit more complicated. The specificity of a descendant selector is the total value of all of the selectors listed.

  • A descendant selector = 1 tag + 1 tag/class

  • 5. CSS Basic-2019-4-11-11-28-42.png
  • If there’s still collision, last style wins
  • !important; This is an overruling specificity, it means ‘this is important, ignore subsequent rules, and any usual specificity issues, apply this rule!’ For example:
    1
    2
    3
    4
    <style>
    .nav a { color: red; }
    a { color: blue !important; }
    </style>